<script lang="ts" setup>
import CommentComponents from "@/components/home/CommentComponents.vue";
import { useRouter } from 'vue-router'
import { homeStoriesStore } from "../../store";
import { storeToRefs } from 'pinia'
import 'vant/es/toast/style';
import { Toast } from 'vant';

const router = useRouter()
const store = homeStoriesStore();

const { articleTitle, commentList } = storeToRefs(store);

Toast.loading({
    message: '加载中...',
    forbidClick: true,
});

function getTime(t: string) {
    const time = t.replaceAll('-', ".");
    return time.substring(0, 16)
}

function goBackFunc() {
    router.push({ name: 'home' });
}
</script>

<template>
    <div class="mb-32" >
        <div class="p-5 flex items-center ">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goBackFunc">
            <div class="text-center text-2xl w-11/12 ">{{ articleTitle }}</div>
            <img class="w-8 h-8" src="@/assets/card/stow_default.png" alt="img">
        </div>
        <div class="px-8">
            <div class="text-2xl w-24 py-5 border-b-4 border-black" >评论列表</div>
            <div v-for="(l, index) in commentList " :key="index" class="border-b py-5">
                <div class="flex items-center justify-between mb-3 mt-5 ">
                    <div class="flex ">
                        <img :src="l.user.web_url" alt="img" class=" w-10 h-10 mr-3 rounded-full ">
                        <div class="text-2xl text-gray-400 ">{{ l.user.user_name }}</div>
                    </div>
                    <div class="text-2xl text-gray-500 "> {{ getTime(l.created_at) }}</div>
                </div>
                <div class="text-content p-5 ">{{ l.content }}</div>

                <div class="flex justify-end items-center">
                    <img class="w-8 h-8" src="@/assets/card/bottom_comment.png" alt="img">
                    <img class="w-8 h-8 ml-5 mr-3 " src="@/assets/card/comment_laud.png" alt="img">
                    <div class="text-gray-400 mr-8" >{{ l.praisenum }}</div>
                </div>
            </div>
        </div>
        <CommentComponents />
    </div>
</template>

<style>
.text-content {
    line-height: 25px;
}
</style>